<template>
     <div class="hg">
          <div class="musicButton">
       <div class="musicButton-left">
          <img :src="musicList[plIndex].al.picUrl" >
      </div>
       <router-link to="/lyricdetail" class="musicButton-center">
          <div>{{musicList[plIndex].name}}</div>
          <div>music-play</div>
      </router-link>
        <div class="musicButton-right">
         <text class="iconfont icon-zantingrizhi" v-if="playState" @click="playOrpau"></text>
         <text class="iconfont icon-liebiao-" v-else @click="playOrpau"></text>
         <text class="iconfont icon-zu"></text>
      </div>
      <audio  ref="audios" :src="`https://music.163.com/song/media/outer/url?id=${musicList[plIndex].id}.mp3`"></audio>
  </div>
     </div> 
</template>

<script>
import {ref, computed,onMounted} from 'vue'
import {useStore} from 'vuex'
export default {
  setup(){
       const audios = ref()
        const store = useStore()
        const musicList = computed(()=> store.state.musicURL)
        // const idqs = computed(()=> store.state.musicURL.name)
        const playState = computed(()=> store.state.playOrPause)
        const plIndex = computed(()=>store.state.playIndex)
          function playOrpau(){
          
       
            if(audios.value.paused){
                audios.value.play()
                store.commit('UPDATASTATE',false)
               
              }
           else{
             audios.value.pause()
             store.commit('UPDATASTATE',true)
            }
      
        
          }
        return {musicList,audios,playOrpau,playState,plIndex}  
        
  }
}
</script>

<style lang="less">
.hg{
    height:2rem;
    .musicButton{
    position:fixed;
    bottom:0;
    left:0;
    display: flex;
    justify-content: space-around;
    width:100%;
    height:1.3rem;
    border-top: 1px solid rgb(83, 82, 82);
    background: rgb(252, 250, 251);
    .musicButton-left{
        // background:cadetblue;
        img{
            width:1rem;
            height:1rem;
            margin-top:0.3rem;
            border-radius: 100%;
        }
    }
    .musicButton-center{
        // background: brown;
        margin-top:0.31rem;
        width:3.6rem;
        // padding-left:0.1rem;
    div{
        font-size:0.36rem;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    div:nth-child(2){
        font-size: 0.32rem;
        color:rgb(82, 98, 99);
    }
    }
    .musicButton-right{
           line-height: 1.5rem;
           margin-right:0.3rem;
          text{
              font-size: 0.62rem;
          }
          text:nth-child(1){
              margin-right:0.3rem;
          }
    }
}
}
</style>